<template>
    <div class="qilin-QilinTree">
        <div class="header">基本使用</div>
        <QilinTree v-model:treeConfig="treeConfig"></QilinTree>
        <CodeMirror :codeValue="codeValue1"></CodeMirror>
        <br>
        <br>
        <div class="header">Props</div>
        <QilinTable v-model:tableConfig="propsTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Events</div>
        <br>
        <br>
        <div class="header">Exposes</div>
        <QilinTable v-model:tableConfig="exposesTableConfig"></QilinTable>
        <br>
        <br>
        <div class="header">Slots</div>
        <br>
        <br>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
const codeValue1=computed(()=>{
    return `
        // --html部分
        <QilinTree v-model:treeConfig="treeConfig"></QilinTree>
        // --js部分
        const treeConfig=reactive({
            itemConfig:{
                showCheckbox:true,
                nodeKey:"id"
            },
            props:{
                label:"name",
                children:"children"
            },
            data:[
                {
                    name:"南京冠霆智能科技有限公司",
                    id:1,
                    children:[
                        {
                            name:"看守所项目",
                            id:11
                        },
                        {
                            name:"拘留所项目",
                            id:12
                        },
                        {
                            name:"戒毒所项目",
                            id:13
                        },
                        {
                            name:"安康医院项目",
                            id:14
                        }
                    ]
                },
                {
                    name:"亚信安全有限公司",
                    id:2,
                    children:[
                        {
                            name:"亚信智网有限公司",
                            id:21,
                            children:[
                                {
                                    name:"SDP零信任项目",
                                    id:211
                                },
                                {
                                    name:"动态应用安全防护系统BSG",
                                    id:212
                                }
                            ]
                        }
                    ]
                },
                {
                    name:"苏软科技（南京）有限公司",
                    id:3,
                    children:[
                        {
                            name:"云上贵州项目",
                            id:31
                        },
                        {
                            name:"红花街道h5项目",
                            id:32
                        },
                        {
                            name:"温州市党政机关信息化项目",
                            id:33
                        }
                    ]
                },
                {
                    name:"南京联创智慧城市科技有限公司",
                    id:4,
                    children:[
                        {
                            name:"U创办公管理系统",
                            id:41
                        },
                        {
                            name:"U创办公小程序",
                            id:42
                        }
                    ]
                }
            ]
        });
    `
});


/*
    逻辑脚本代码区域
*/
const treeConfig=reactive({
    itemConfig:{
        showCheckbox:true,
        nodeKey:"id"
    },
    props:{
        label:"name",
        children:"children"
    },
    data:[
        {
            name:"南京冠霆智能科技有限公司",
            id:1,
            children:[
                {
                    name:"看守所项目",
                    id:11
                },
                {
                    name:"拘留所项目",
                    id:12
                },
                {
                    name:"戒毒所项目",
                    id:13
                },
                {
                    name:"安康医院项目",
                    id:14
                }
            ]
        },
        {
            name:"亚信安全有限公司",
            id:2,
            children:[
                {
                    name:"亚信智网有限公司",
                    id:21,
                    children:[
                        {
                            name:"SDP零信任项目",
                            id:211
                        },
                        {
                            name:"动态应用安全防护系统BSG",
                            id:212
                        }
                    ]
                }
            ]
        },
        {
            name:"苏软科技（南京）有限公司",
            id:3,
            children:[
                {
                    name:"云上贵州项目",
                    id:31
                },
                {
                    name:"红花街道h5项目",
                    id:32
                },
                {
                    name:"温州市党政机关信息化项目",
                    id:33
                }
            ]
        },
        {
            name:"南京联创智慧城市科技有限公司",
            id:4,
            children:[
                {
                    name:"U创办公管理系统",
                    id:41
                },
                {
                    name:"U创办公小程序",
                    id:42
                }
            ]
        }
    ]
});
const propsTableConfig=reactive({
    elTableConfig:{
        border:true,
        defaultExpandAll:true,
        rowKey:"attrName",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            // if((rowIndex === 0 && columnIndex === 0) ||
            //     (rowIndex === 14 && columnIndex === 0) ||
            //     (rowIndex === 15 && columnIndex === 0) ||
            //     (rowIndex === 16 && columnIndex === 0)
            // ){
            //     return {
            //         "font-weight":"bolder",
            //         color:"#2d8cf0"
            //     }
            // }
        }
    },
    headerConfig:[
        {
            label:"属性名",
            prop:"attrName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"attrType",
            type:"text",
            width:120
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
        {
            label:"可取值",
            prop:"valuable",
            type:"text",
            replaceValue:"-"
        },
        {
            label:"默认值",
            prop:"default",
            type:"text",
            width:150
        }
    ],
    tableData:[
        {
            attrName:"itemConfig",
            attrType:"array",
            description:"树组件配置项",
            valuable:"-",
            default:"-",
            children:[
                {
                    attrName:"showCheckbox",
                    attrType:"boolean",
                    description:"是否显示复选框",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"nodeKey",
                    attrType:"string",
                    description:"每个树节点用来作为唯一标识的属性",
                    valuable:"-",
                    default:"id"
                },
                {
                    attrName:"checkOnClickNode",
                    attrType:"boolean",
                    description:"是否在点击节点的时候选中节点，默认只有在点击复选框时才会选中节点",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"currentNodeKey",
                    attrType:"string",
                    description:"当前选中的节点",
                    valuable:"-",
                    default:"-"
                },
                {
                    attrName:"highlightCurrent",
                    attrType:"boolean",
                    description:"是否高亮当前选中节点",
                    valuable:"true/false",
                    default:"true"
                },
                {
                    attrName:"defaultCheckdKeys",
                    attrType:"array",
                    description:"默认选中的节点key的数组",
                    valuable:"-",
                    default:"[]"
                },
                {
                    attrName:"defaultExpendedKeys",
                    attrType:"array",
                    description:"默认展开的节点key的数组",
                    valuable:"-",
                    default:"[]"
                },
                {
                    attrName:"checkStrictly",
                    attrType:"boolean",
                    description:"是否严格遵循父子不互相关联",
                    valuable:"true/false",
                    default:"false"
                },
                {
                    attrName:"filterNodeMethod",
                    attrType:"function",
                    description:"过滤树节点方法",
                    valuable:"(value,data,node)=>{return true/false}",
                    default:"-"
                },
                {
                    attrName:"checkChange",
                    attrType:"function",
                    description:"当复选框被点击的时候触发",
                    valuable:"(obj,isChecked,isNodeChecked)=>{}",
                    default:"-"
                },
                {
                    attrName:"currentChange",
                    attrType:"function",
                    description:"当前选中节点变化时触发的事件",
                    valuable:"(row,node)=>{}",
                    default:"-"
                },
                {
                    attrName:"nodeClick",
                    attrType:"function",
                    description:"当节点被点击的时候触发",
                    valuable:"(obj,node,treeNode,event)=>{}",
                    default:"-"
                },
                {
                    attrName:"check",
                    attrType:"function",
                    description:"点击节点复选框之后触发",
                    valuable:"(obj,checkedObj)=>{}",
                    default:"-"
                }
            ]
        },
        {
            attrName:"props",
            attrType:"object",
            description:"树组件的数据配置选项，详见element-plus官网",
            valuable:"-",
            default:"-"
        },
        {
            attrName:"data",
            attrType:"array",
            description:"树组件的真实后台数据",
            valuable:"-",
            default:"[]"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});
const exposesTableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"方法名",
            prop:"exposeName",
            type:"text",
            width:180
        },
        {
            label:"类型",
            prop:"exposeType",
            type:"text",
            width:100
        },
        {
            label:"参数",
            prop:"exposeValue",
            type:"text",
            width:100
        },
        {
            label:"说明",
            prop:"description",
            type:"text"
        },
    ],
    tableData:[
        {
            exposeName:"setCheckedNodes",
            exposeType:"function",
            exposeValue:"nodes",
            description:"设置目前勾选的节点事件监听，详见element-plus官网文档setCheckedNodes方法调用el-tree的setCheckedNodes事件监听-设置目前勾选的节点，使用此方法必须提前设置node-key属性，参数为节点构成的数组"
        },
        {
            exposeName:"filter",
            exposeType:"function",
            exposeValue:"value",
            description:"调用el-tree的filter事件监听-过滤所有树节点，过滤后的节点将被隐藏；接收一个参数并指定为 filter-node-method 属性的第一个参数"
        },
        {
            exposeName:"setChecked",
            exposeType:"function",
            exposeValue:"key,checked,deep",
            description:"调用el-tree的setChecked事件监听-设置节点是否被选中，使用此方法必须设置node-key属性"
        },
        {
            exposeName:"setCheckedKeys",
            exposeType:"function",
            exposeValue:"keys, leafOnly",
            description:"调用el-tree的setCheckedKeys事件监听-设置目前勾选的节点，使用此方法必须提前设置node-key属性，(keys, leafOnly) 接收两个参数: 1. 一个需要被选中的多节点 key 的数组，2. 布尔类型的值 如果设置为 true，将只设置选中的叶子节点状态。 默认值是 false."
        },
        {
            exposeName:"getCheckedKeys",
            exposeType:"function",
            exposeValue:"leafOnly",
            description:"调用el-tree的getCheckedKeys事件监听-若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组；(leafOnly) 接收一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。"
        },
        {
            exposeName:"getCheckedNodes",
            exposeType:"function",
            exposeValue:"leafOnly, includeHalfChecked",
            description:"调用el-tree的getCheckedNodes事件监听-如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组；(leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据。"
        }
    ],
    paginationsObj:{
        isHide:true
    }
});

/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>

</style>
